import {
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@shadcn/sidebar";
import { Separator } from "@shadcn/separator";
import { StyledSidebar, StyledBadge as Badge } from "./styles";
import { Button, Tag } from "antd";
import {
  RocketOutlined,
  SettingOutlined,
  ReadOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Avatar } from "@/ui/cpts/std/Avatar";
import { useViewModel } from "./model.view";
import { OpenAccountDialog } from "@/ui/cpts/biz/XHSAppSidebar/components/OpenAccountDialog";
import { clsx } from "clsx";
import dayjs from "dayjs";
import { XHMSettings } from "@/ui/cpts/biz/XHMSettings";

export function XHSAppSidebar() {
  const {
    globalModel,
    totalUnreadAmount,
    unreadAmount,
    isSettingsShow,
    dialogARef,
    dialogBRef,

    onAccountSelected,
    setIsSettingsShow,
    onCreateAccountClick,
  } = useViewModel();

  return (
    <StyledSidebar className={"xhs-app-sidebar"} collapsible={"icon"}>
      <div className={"account-summary"}>
        <div className={"all-comments"}>
          <div>全部账号</div>
          {!!totalUnreadAmount && (
            <Badge color={"red"}>{totalUnreadAmount}</Badge>
          )}
        </div>

        <SidebarGroup>
          <div className={"account-controller"}>
            <div>按账号</div>
            <Button
              size={"small"}
              type={"primary"}
              onClick={onCreateAccountClick}
            >
              新增账号
            </Button>
            <OpenAccountDialog
              ref={dialogARef}
              onSuccess={(loginedSession) =>
                onAccountSelected(loginedSession)()
              }
            />
          </div>
        </SidebarGroup>

        <Separator />
      </div>

      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            {globalModel?.profiles.map((profile) => {
              const user = profile.xhsUser;
              const session = globalModel?.sessions.find(
                (s) => s.id === profile.id,
              );
              if (!user) return;

              return (
                <SidebarMenuItem
                  key={profile.id}
                  className={clsx("account-item menu-item", {
                    current:
                      session?.id &&
                      session?.id === globalModel?.currentSession?.id,
                  })}
                >
                  {user && session ? (
                    <SidebarMenuButton onClick={onAccountSelected(session)}>
                      <Avatar
                        src={user?.avatar ?? ""}
                        alt={"XHS"}
                        pending={(globalModel.updating ?? {})[session.id]}
                      />
                      <span>{user?.nickname ?? "未使用"}</span>
                    </SidebarMenuButton>
                  ) : (
                    <>
                      <SidebarMenuButton
                        onClick={() => dialogBRef.current?.show(true)}
                      >
                        <Avatar src={user?.avatar ?? ""} alt={"XHS"} />
                        <span>{user?.nickname ?? "未使用"} </span>
                      </SidebarMenuButton>
                      <OpenAccountDialog
                        ref={dialogBRef}
                        session={session}
                        profile={profile}
                        onSuccess={(loginedSession) =>
                          onAccountSelected(loginedSession)()
                        }
                      />
                    </>
                  )}

                  <SidebarMenuBadge>
                    {!session
                      ? "点击登录"
                      : user &&
                        !!unreadAmount[user.user_id] && (
                          <Badge>{unreadAmount[user.user_id]}</Badge>
                        )}
                  </SidebarMenuBadge>
                </SidebarMenuItem>
              );
            })}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <Separator />

        <SidebarGroup>
          <SidebarMenu>
            <SidebarMenuItem className={"menu-item"}>
              <SidebarMenuButton disabled={true}>
                <ReadOutlined />
                <span>管理话术库</span>
              </SidebarMenuButton>
            </SidebarMenuItem>

            <SidebarMenuItem className={"menu-item"}>
              <SidebarMenuButton disabled={true}>
                <RocketOutlined />
                <span>自动化</span>
              </SidebarMenuButton>
            </SidebarMenuItem>

            <SidebarMenuItem className={"menu-item"}>
              <SidebarMenuButton
                onClick={() => setIsSettingsShow(true)}
                disabled={true}
              >
                <SettingOutlined />
                <span>系统设置</span>
              </SidebarMenuButton>
            </SidebarMenuItem>

            <SidebarMenuItem className={"menu-item"}>
              {!globalModel.user ? (
                <SidebarMenuButton disabled={true}>
                  <UserOutlined />
                  <span>未登录</span>
                </SidebarMenuButton>
              ) : (
                <SidebarMenuButton>
                  <UserOutlined />
                  <span>
                    {globalModel.user.nick || globalModel.user.name}
                    &nbsp;
                    {globalModel.user.validEnd ? (
                      <Tag color={"cyan"}>
                        {dayjs(globalModel.user.validEnd).fromNow(true)}到期
                      </Tag>
                    ) : (
                      <Tag color={"magenta"}>永久</Tag>
                    )}
                  </span>
                </SidebarMenuButton>
              )}
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarFooter>

      {isSettingsShow && (
        <XHMSettings
          onCancel={() => setIsSettingsShow(false)}
          onSaveDone={() => setIsSettingsShow(false)}
        />
      )}
    </StyledSidebar>
  );
}
